const path = require("path")

const HtmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} =require("clean-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")


module.exports={
  
  // 输入文件
  entry:"./src/index.js",
  // 输出文件
  output:{
    filename:"build.js",
    path:path.resolve(__dirname,"dist")
  }, 
  module:{
    rules:[
      {
        test: /\.css$/,
        // use: ["style-loader", "css-loader"],
        // use: [MiniCssExtractPlugin.loader, "css-loader"]
        use:[
          process.env.NODE_ENV == 'development' ? { loader: 'style-loader' } : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
                importLoaders: 1
            }
          }
        ]
        
      },
      {
        test:/\.png$/,
        use:{
          loader:"url-loader",
          options: {
            limit: 10*1024,        // 小于10kb字节的图片打包成base 64图片
            name:'images/[name].[hash:8].[ext]',
        }
        }  
      },
      {
        test:/\.js$/,
        use:{
          loader:"babel-loader",
          options:{
            presets: ['@babel/preset-env']
          }
        }
      },
    ]
  },
  
  plugins:[
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename:"index.css"
    }),
    new  HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    
  ]
}
